<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--VUE 3步
  1. 做界面
  1.1 唯一父元素包裹
  1.2 找可能发生变化的元素
  本例中: 两个div二选一显示，所以用v-if和v-else
  1.3 找触发事件的元素
  本例中: 登录和注销两个a元素可以触发事件-->
  <div id="app">
    <!--已登录时显示-->
    <div v-if="isLogin">
      <h3>Welcome dingding <a href="javascript:;" @click="logout">注销</a></h3>
    </div>
    <!--未登录时显示-->
    <div v-else>
      <a href="javascript:;" @click="login">登录</a> | 
      <a href="javascript:;">注册</a>
    </div>
    
  </div>
  <script>
    //2. 创建new Vue()
    new Vue({
      el:"#app",
      //3. 创建模型对象
      //3.1 创建data对象
      //本例中：因为界面中只需要1个变量isLogin来标记用户是否登录
      data:{
        isLogin:false //开局，用户默认未登录
      },
      //3.2 创建methods对象
      //本例中：因为界面需要两个事件处理函数
      methods:{
        login(){//将用户登录状态改为已登录
          this.isLogin=true;
        },
        logout(){//将用户登录状态改为未登录
          this.isLogin=false;
        }
      }
    })
  </script>
</body>
</html>
